<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
</head>
<style>
    #box1{
        /* 标准盒模型 */
        width:100px;
        height:100px;
        padding:10px;
        border:1px solid red;
        margin: 20px;
        background-color: antiquewhite;
        box-sizing: content-box;
    }

    #box2{
        /* 怪异盒模型 */
        width:100px;
        height:100px;
        padding:10px;
        border:1px solid red;
        margin: 20px;
        background-color:pink;
        box-sizing:border-box;
        /* 
            后台打印结果：
                content的width = width - 2border - 2padding = 100 - 2*2 -2*10 = 78
        */
    }
</style>
<body>
    <!-- 
        盒模型（box model）:
            包括内容区（content）、内边距（padding）、边框（border）、外边距（margin）


        (1)分为：标准盒模型 和 IE盒模型（怪异盒模型）：
                两者的区别在于对width和height的计算上：标准盒模型指的是内容区的宽高，怪异盒模型指的是内容区+内边距+边框的宽高

                通过box-sizing进行转换：box-sizing:content-box; box-sizing: border-box;

        (2)获取盒子模型对应宽高
            dom.style.width/height   只能取到行内样式的宽和高 style和link外链的样式取不到
            dom.currentStyle.width/height  取到的是最终渲染后的宽和高 只有IE支持此属性
            window.getComputedStyle(dom).width/height  同上
            dom.getBoundingClientRect().width/height 同上，外加可以获取视窗
     -->


     <!-- 
            外边距重叠问题：
                当两个垂直块元素外边距相遇的时候，他们会合并成一个外边距，取较大者
                
            注意：只有普通文档流中块框的外边距才会发生外边距合并，行内框、浮动框或者绝对定位之间外边距不会合并
 
      -->
     <div id="box1">我是标准盒模型</div>
     <div id="box2">我是怪异盒模型</div>

     <script>
        //  1. 标准盒模型
        const box1 = document.getElementById("box1");
        const w1 = window.getComputedStyle(box1).width;
        const h1 = window.getComputedStyle(box1).height;
        console.log(w1, h1); // 100px 100px

        //  2. 怪异盒模型
        const box2 = document.getElementById("box2");
        const w2 = window.getComputedStyle(box2).width;
        const h2 = window.getComputedStyle(box2).height;
        console.log(w2, h2); // 100px 100px
     </script>
</body>
</html>